<template>
	<view class="all">
		<h2 class="border">
			查找您所在的商店
			<br />
			<br />
			<br />
		</h2>
		<view class="choose">
			<view class="input">
				<svg width="22" height="22" viewBox="0 0 36 36" colorType="light">
					<path d="M16.125 3C23.374 3 29.25 8.876 29.25 16.125c0 3.386-1.282 6.472-3.387 8.8l7.11 6.867-1.159 1.199-7.145-6.902a13.074 13.074 0 01-8.544 3.161C8.876 29.25 3 23.374 3 16.125S8.876 3 16.125 3zm0 1.667c-6.328 0-11.458 5.13-11.458 11.458s5.13 11.458 11.458 11.458 11.458-5.13 11.458-11.458-5.13-11.458-11.458-11.458z" fill="currentColor" fill-rule="nonzero"></path>
				</svg>
				<input type="text" placeholder="输入店名或地址" />
			</view>
			<view class="bot">
				<svg color="#000" v-if="mylon !== '' && mylat !== ''" id="ebf9hgyjag41"
					xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30"
					shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="20" height="20"
					class="sc-gFnajm iQUMsh">
					<g id="ebf9hgyjag42"
						transform="matrix(1.66000000000000 0 0 1.66000000000000 0.06000000000000 0.06000000000000)">
						<g id="ebf9hgyjag43">
							<ellipse id="ebf9hgyjag44" rx="4.500000" ry="2"
								transform="matrix(1 0 0 1 9 13.50000000000000)" opacity="1" fill="none"
								fill-rule="evenodd" stroke="currentColor" stroke-width="1"></ellipse>
							<ellipse id="ebf9hgyjag45" rx="8.500000" ry="4"
								transform="matrix(1 0 0 1 9 13.50000000000000)" opacity="1" fill="none"
								fill-rule="evenodd" stroke="currentColor" stroke-width="1"></ellipse>
							<circle id="ebf9hgyjag46" r="1.500000" transform="matrix(1 0 0 1 9 2)" fill="currentColor"
								fill-rule="evenodd" stroke="currentColor" stroke-width="1">
							</circle>
							<path id="ebf9hgyjag47"
								d="M9,4.500000C9.690356,4.500000,10.315356,4.779822,10.767767,5.232233C11.220178,5.684644,11.500000,6.309644,11.500000,7L11.500000,7L11.500000,9.500000L6.500000,9.500000L6.500000,7C6.500000,6.309644,6.779822,5.684644,7.232233,5.232233C7.684644,4.779822,8.309644,4.500000,9,4.500000Z"
								fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-width="1">
							</path>
							<path id="ebf9hgyjag48"
								d="M10.390098,9.500000L9.713664,12.882171L9.590098,13.500000L8.409902,13.500000L7.609902,9.500000L10.390098,9.500000Z"
								fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-width="1">
							</path>
						</g>
					</g>

				</svg>
				<view class="search" v-if="mylon === '' && mylat === ''">
					<svg id="ebf9hgyjag41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
						viewBox="0 0 30 30" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
						width="20" height="20" class="sc-gFnajm iQUMsh">
						<g id="ebf9hgyjag42"
							transform="matrix(1.66000000000000 0 0 1.66000000000000 0.06000000000000 0.06000000000000)">
							<g id="ebf9hgyjag43">
								<ellipse id="ebf9hgyjag44" rx="4.500000" ry="2"
									transform="matrix(1 0 0 1 9 13.50000000000000)" opacity="1" fill="none"
									fill-rule="evenodd" stroke="currentColor" stroke-width="1"></ellipse>
								<ellipse id="ebf9hgyjag45" rx="8.500000" ry="4"
									transform="matrix(1 0 0 1 9 13.50000000000000)" opacity="1" fill="none"
									fill-rule="evenodd" stroke="currentColor" stroke-width="1"></ellipse>
								<circle id="ebf9hgyjag46" r="1.500000" transform="matrix(1 0 0 1 9 2)"
									fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-width="1">
								</circle>
								<path id="ebf9hgyjag47"
									d="M9,4.500000C9.690356,4.500000,10.315356,4.779822,10.767767,5.232233C11.220178,5.684644,11.500000,6.309644,11.500000,7L11.500000,7L11.500000,9.500000L6.500000,9.500000L6.500000,7C6.500000,6.309644,6.779822,5.684644,7.232233,5.232233C7.684644,4.779822,8.309644,4.500000,9,4.500000Z"
									fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-width="1">
								</path>
								<path id="ebf9hgyjag48"
									d="M10.390098,9.500000L9.713664,12.882171L9.590098,13.500000L8.409902,13.500000L7.609902,9.500000L10.390098,9.500000Z"
									fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-width="1">
								</path>
							</g>
						</g>

					</svg>
					<view style="margin:0 15px;" @click="getdistance">
						查看附近的商店
					</view>
				</view>
				<view class="" v-else>
				</view>
				<view class="skip" @click="tomail">
					<view class="tg">跳过</view>
					<svg width="8px" height="15px" viewBox="0 0 8 15" align="center" class="sc-gsFSXq hebHcC"><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Forward" transform="translate(-14.000000, -10.000000)" fill="currentColor" fill-rule="nonzero"><g id="Group" transform="translate(14.000000, 10.800000)"><g id="Icon-set"><path d="M1.93581585e-14,13.0468137 L1.1575296,14.2 L7.70550587,7.67659315 C8.02514884,7.35814954 8.02514884,6.84185046 7.70550587,6.52340685 L1.1575296,-9.38577383e-15 L1.93581585e-14,1.1531863 L5.96921146,7.1 L1.93581585e-14,13.0468137 Z" id="Forward"></path></g></g></g></g></svg>
				</view>
			</view>
		</view>
		<view class="botchoose" v-if="mylon !== '' && mylat !== ''">
			<!-- <view class="botchoose"> -->
			<view class="item" @click="tomail(data_show1)" v-if="data_show1.id">
				<view class="ileft">
					<view class="ititle">
						{{data_show1.name}}
					</view>
					<view class="distance">
						{{Number(data_show1.distance).toFixed(2)}}km
					</view>
					<view class="loca">
						{{data_show1.location}}
					</view>
				</view>
				<view class="iright">
					<img class="skip_img" src="/static/right2.png" alt="" />
				</view>
			</view>
			<view class="item" style="color: #000;background-color: #fff;" @click="tomail(data_show2)"
				v-if="data_show2.id">
				<view class="ileft">
					<view class="ititle">
						{{data_show2.name}}
					</view>
					<view class="distance">
						{{Number(data_show2.distance).toFixed(2)}}km
					</view>
					<view class="loca">
						{{data_show2.location}}
					</view>
				</view>
				<view class="iright">
					<img class="skip_img" src="/static/right.png" alt="" />
				</view>
			</view>
			<view class="" v-if="show_more === true">
				<view class="item" style="color: #000;background-color: #fff;" @click="tomail(item)"
					v-for="item in data">
					<view class="ileft">
						<view class="ititle">
							{{item.name}}
						</view>
						<view class="distance">
							{{Number(item.distance).toFixed(2)}}km
						</view>
						<view class="loca">
							{{item.location}}
						</view>
					</view>
					<view class="iright">
						<img class="skip_img" src="/static/right.png" alt="" />
					</view>
				</view>
			</view>
			<view class="more" v-if="show_more === false" @click="more">
				查看所有商店
			</view>
		</view>
		<overall :back="true" color="#fff" :backgroupcolor='false' :main_logo="true" @login="login"></overall>
	</view>
</template>

<script>
	import {
		calculateDistance,
		deg2rad
	} from '../../static/distance.js';
	import overall from '../overall.vue'
	export default {
		components: {
			overall
		},
		data() {
			return {
				mode: null,
				mylon: '',
				mylat: '',
				data: [],
				data_show1: {},
				data_show2: {},
				show_more: false
			}
		},
		onLoad(option) {
			this.mode = option.mode
			// let that = this

			this.getdistance()
		},
		methods: {
			getdistance() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.mylon = res.longitude
						that.mylat = res.latitude
						wx.request({
							url: '/api/index/get_store',
							method: 'POST',
							success: res => {
								console.log(res);
								that.data.push(...res.data.data)
								for (let i = 0; i < that.data.length; i++) {
									let arr = that.data[i].lon_lat.split(',')
									that.data[i].distance = calculateDistance(that.mylon, that
										.mylat,
										arr[0], arr[1])
									console.log(that.data);
									that.data.sort((a, b) => a.distance - b.distance);

									if (i === 0) {
										that.data_show1 = that.data[i]
									} else if (i === 1) {
										that.data_show2 = that.data[i]
									}
								}
								that.data = that.data.filter(item => {
									return !(item == that.data_show2 || item == that
										.data_show1)
								})
							},
							fail: err => {
								console.log(err);
							}
						})
					}
				});
			},
			more() {
				this.show_more = true
			},
			tomail(store) {
				uni.setStorageSync('store', store.id)
				let status = uni.getStorageSync('login')
				if (status && status === 'success') {
					uni.navigateTo({
						url: '/pages/mail/photo'
					})
				} else {
					uni.navigateTo({
						url: '/pages/mail/mail'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.all {
		display: flex;
		flex-direction: column;
		min-height: 90vh;
		padding: 15% 5% 5% 5%;
		background-image: url(/static/1.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.border {
		margin-top: 40rpx;
		border-left: 6px #fff solid;
		padding-left: 40rpx;
		height: max-content;
		font-size: 19px;
		font-weight: bolder;
		color: #fff;
	}

	.choose {
		margin-top: 3vh;
		width: 100%;
	}

	.input {
		border-bottom: 2px #fff solid;
		padding-bottom: 7px;
		display: flex;
		flex-direction: row;
		color: #fff;
	}

	.search {
		height: 34px;
		min-height: auto;
		border-radius: 17px;
		background-color: #000;
		color: #fff;
		cursor: pointer;
		width: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.skip_img {
		width: 20px;
		height: 20px;
	}

	.skip {
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 56.2px;
	}

	.bot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: #fff;
		background-color: #fff;
		padding: 4%;
		margin-top: 10px;
		border: #fff 1px solid;
		line-height: 16px;
	}

	.ititle {
		font-weight: bolder;
	}

	.botchoose {
		margin-top: 10px;
	}

	.more {
		font-size: 13px;
		font-weight: bolder;
		height: 13px;
		text-decoration: underline;
		margin: 30px auto;
		text-align: center;
	}
</style>